<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邮件推送设置</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <script type="text/javascript" src="{{$style_host}}atw/js/jquery.min.js"></script>
<body>
<div class="main">


    <!--- 展示页面列表 --->
{!! $html !!}


<!--- 隐藏：用于加载更多 --->
    <span id="nextPage_url" style="display: none">{{$nextPage}}</span>
    <div class="more fw700" id="news_cate_more"><span>Load More</span></div>
</div>
</body>


<script type="text/javascript">

    // 加载更多
    $("#news_cate_more").on('click', function () {
        let nextUrl = $("#nextPage_url").text()
        toCateMore(nextUrl)
    })

    // 设置为邮件
    function toEmail(ement, id) {
        let status = $(ement).data('status');
        let to_status = 1 - status;

        console.log('设置邮件状态：前', status);
        console.log('设置邮件状态：后', to_status);
        console.log('设置邮件id', id);
        $.ajax({
            type: 'post',
            url: '/push-toemail.html',
            // data: 'name=zhangsan&age=20'
            data: JSON.stringify({id: id, status: to_status}),
            contentType: 'application/json',
            dataType: "json",
            // contentType: 'application/x-www-form-urlencoded',
            // 这个方法在请求发送前调用，可以用来做表单校验、用来做请求等待动画的调用
            /*beforeSend: function () {
                // 返回false是取消发送
                return false
            },*/
            // 会自动帮我们把返回的数据根据响应头设置的类型进行转换好（也就是会自动转成json对象）
            success: function (res) {
                console.log('执行结果', res)
                if (res.code == 400) {
                    alert(res.msg)
                } else {
                    $(ement).data('status', to_status);
                    if (to_status == 1) {
                        $(ement).removeClass('a1').addClass('a2');
                        $(ement).text('已推送')
                    } else {
                        $(ement).removeClass('a2').addClass('a1');
                        $(ement).text('设为推送')
                    }
                }
            },
            // xhr是ajax对象
            error: function (xhr) {
            }
        });
    }


    // 加载下一页：栏目的下一页
    function toCateMore(url) {
        console.log('加载更多', url);
        $.ajax({
            type: 'post',
            url: url,
            // data: 'name=zhangsan&age=20'
            data: {},
            contentType: 'application/json',
            dataType: "json",
            // contentType: 'application/x-www-form-urlencoded',
            // 这个方法在请求发送前调用，可以用来做表单校验、用来做请求等待动画的调用
            /*beforeSend: function () {
                // 返回false是取消发送
                return false
            },*/
            // 会自动帮我们把返回的数据根据响应头设置的类型进行转换好（也就是会自动转成json对象）
            success: function (res) {
                console.log('执行结果', res)
                if (res.code == 400) {
                    alert(res.msg)
                } else {
                    $("#nextPage_url").before(res.data.html)
                    $("#nextPage_url").text(res.data.nextUrl)
                    if (!res.data.html) {
                        $("#news_cate_more").css('display', 'none');
                    }
                }
            },
            // xhr是ajax对象
            error: function (xhr) {
            }
        });
    }

</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    a {
        color: #2c2c2c;
        text-decoration: none;
    }

    body {
        background-color: #f4f5f9;
        color: #2c2c2c;
        font: 14px/1.3 Proxima Nova, Helvetica, Arial, sans-serif;
    }

    .main {
        padding: 10px;
    }

    .time {
        font-size: 16px;
        font-weight: 700;
        padding: 15px 0 0 0;
    }
    .time:first-child {
        padding: 0;
    }

    .list {
        margin: 10px 0 0 0;
        background-color: #ffffff;
        padding: 12px 12px 16px 12px;
    }

    h2 {
        font-size: 16px;
        font-weight: 500;
    }

    h3 {
        margin: 5px 0;
        font-size: 14px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    h4 {
        font-size: 12px;
        font-weight: 500;
        margin-top: 10px;
        padding-top: 14px;
        border-top: 1px solid #ebebeb;
        text-align: right;
    }

    h4 a {

        color: #ffffff;
        padding: 6px 14px;
        border-radius: 500px;

    }

    h4 a.a1 {
        background-color: #005cd8;
    }

    h4 a.a2 {
        background-color: #bfbfbf;
    }
    
    .more {
        padding: 30px 10px 10px 10px;
        text-align: center;
    }
    
    .more span {
        background-color: #ffffff;
        color: #333333;
        padding: 10px 20px 10px 20px;
        border-radius: 20px;
        font-weight:700;
    }
    
</style>

</html>
